<template lang="pug">
  .three-frame.page(v-if="data")
    CtrlBar(:link="baseUrl + '/rotateview.aspx?rotate_id=' + data",@closeBar='data = null')
    .three-wrap(ref="threeWrap")
      iframe(width="100%", height="100%", frameBorder="0", scrolling="no", :src="baseUrl + '/rotateview.aspx?rotate_id=' + data")
</template>

<script>
import CtrlBar from '@/components/CtrlBar'
import { isPc } from '@/utils'
export default {
  name: 'threeIframe',
  data() {
    return {
      baseUrl: $globalconfig.URLS.API,
      data: null
    }
  },
  mounted() {
    this.$vgo.on('iframe:3d', data => {
      this.data = data
      this.$bar.finish()
      setImmediate(() => {
        if(!isPc()) {
          let vw = document.documentElement.clientWidth
          let vh = document.documentElement.clientHeight
          if(this.$refs.threeWrap) {
            this.$refs.threeWrap.style.width = vh + 'px'
            this.$refs.threeWrap.style.height = vw + 'px'
            this.$refs.threeWrap.style.transform = 'rotate(90deg)'
            this.$refs.threeWrap.style.left = -(vh - vw) / 2 + 'px'
            this.$refs.threeWrap.style.top = (vh - vw) / 2 + 'px'
          }
        }
      })
    })
  },
  components: {
    CtrlBar
  }
}
</script>

<style lang="stylus">
</style>
